<template>
  <div class="app-container">
    <!-- <div class="basics initializeRoll"> -->
    <div class="topDiv">
      <p class="title">
        <img
          src="https://img0.baidu.com/it/u=384452397,1089369801&fm=26&fmt=auto&gp=0.jpg"
          alt
        />
        <span>平台设置</span>
      </p>

      <el-form
        ref="elForm"
        :model="form"
        label-width="130px"
        style="margin-top: 20px"
        :rules="rules"
      >
        <el-row :gutter="10" style="margin:0px auto;width:50%">
          <el-col :span="15" :offset="2">
            <el-form-item label="平台名称" prop="partnerName">
              <el-input
                v-model.trim="form.partnerName"
                placeholder="请输入平台名称"
                maxlength="20"
                show-word-limit
                onkeyup="this.value=this.value.replace(/[, ]/g,'')"
              ></el-input>
            </el-form-item>
            <el-form-item label="平台LOGO">
              <el-upload
                class="upload-demo"
                :action="actionUrl()"
                :on-change="handleChange1"
                :on-remove="handleRemove1"
                :file-list="fileList1"
                :auto-upload="false"
                accept=".jpg,.png,.jpeg,JPG,JPEG"
                list-type="picture"
              >
                <el-button style="width:100px" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="租户项目上限">
              <el-input
                v-model.trim="form.partnerJianjie"
                placeholder="请输入平台简介"
                maxlength="3"
                show-word-limit
                onkeyup="this.value=this.value.replace(/[, ]/g,'')"
              ></el-input>
            </el-form-item>

            <el-form-item label="登录页背景图">
              <el-upload
                class="upload-demo"
                :action="actionUrl()"
                :on-change="handleChange"
                :on-remove="handleRemove"
                :file-list="fileList"
                :auto-upload="false"
                accept=".jpg,.png,.jpeg,JPG,JPEG"
                list-type="picture"
              >
                <el-button style="width:100px" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="后台登录地址">
              <template>
                <el-input
                show-word-limit
                  v-model.trim="form.adminLoginAddress"
                  placeholder="请输入后台登录地址"
                  maxlength="100"
                  type="textarea"
                  clearable
                  onkeyup="this.value=this.value.replace(/[, ]/g,'')"
                ></el-input>
              </template>
            </el-form-item>
            <el-form-item label="APP登录地址" prop="www">
              <template>
                <el-input
                  v-model.trim="form.appLoginAddress"
                  placeholder="请输入APP登录地址"
                  maxlength="100"
                   type="textarea"
                   clearable
                  show-word-limit
                  onkeyup="this.value=this.value.replace(/[, ]/g,'')"
                ></el-input>
                <!-- <a href="javascript:;"> www.baiodu.com </a> -->
                <!-- <el-button
                  type="text"
                  class="applicationFormNum"
                  @click="applicationForm"
                  data-clipboard-action="copy"
                  :data-clipboard-text="'www.baiodu.com'"
                  >复制</el-button
                > -->
                <!-- data-clipboard-action 是复制的方式  copy是复制 还有剪切-->
                <!-- data-clipboard-text 是需要复制的内容  如果是动态的需要函数return -->
              </template>
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" style="width:100px;margin:10px 0px" @click="BaseButton">确定</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
// import clipboard from "clipboard";
// import {
//   avatarLogo,
// } from "@/api/liu/system/userGroup.js";
import { upload, comnonConfig, getSetup, editAPI } from "@/api/system/index.js";

export default {
  data() {
    return {
      // 判断是新增还是修改 0是新增 1是修改
      Datacode: 0,
      //用户ID
      userId: "",
      rules: {
        partnerName: [
          {
            required: true,
            message: "请输入租户名称",
            trigger: "blur",
          },
          {
            pattern: /^[a-zA-Z0-9\u4E00-\u9FA5]{2,20}$/,
            message: "名称格式错误",
            trigger: "change",
          },
        ],
        www: [
           {
            pattern: /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/,
            message: "格式错误",
            trigger: "change",
          },
        ]
      },

      radio: "",
      activeName: "first",
      input2: "first",
      form: {
        adminLoginAddress: "", //后台登录地址
        appLoginAddress: "", //app后台登录地址
        loginBackground: 0, //登录背景图

        partnerJianjie: "", //平台简介

        partnerLogo: "", //平台logo

        partnerName: "", //平台名称

        partnerOffAddress: "", //平台地址关闭
        partnerOffWarn: "", //平台关闭提醒
        userId: 0, //合伙人ID
        id: "", //判断是修改还是新增的ID
      },
      fileList1: [
        // { url: "" }
      ],
      fileList: [
        // { url: "" }
      ],
      // 上传图片URL
      imgesLOGO: "",
      //登陆背景图URL
      bagkroundimges: "",
      a: "",
    };
  },

  async mounted() {
    const userID = sessionStorage.getItem("userID");
    this.userId = userID - 0;
    this.getData();
  },
  methods: {
    actionUrl() {
      return "";
    },
    // 获取基础设置的数据
    async getData() {
      const { data } = await getSetup();
      this.fileList1 = [];
      this.fileList = [];
      if (data.appLogoUrl == "" || data.appLogoUrl == null) {
        this.fileList1 = [];
      } else {
        this.fileList1.push({ url: data.appLogoUrl, name: "logoname" });
      }
      if (
        data.loginBackgroundImageUrl == "" ||
        data.loginBackgroundImageUrl == null
      ) {
        this.fileList = [];
      } else {
        this.fileList.push({
          url: data.loginBackgroundImageUrl,
          name: "background",
        });
      }
      // //console.log(data, "获取基础设置");

      this.form.id = data.id; //判断是修改还是新增的ID
      this.form.partnerName = data.appName || "平台管理系统"; //平台名称
      this.form.adminLoginAddress = data.adminLoginAddress; //后台登录地址
      this.form.appLoginAddress = data.appLoginAddress; //APP登录地址
      (this.form.partnerJianjie = data.projectNum || 3), //租户项目上限
        (this.a = "1");
    },

    // 基础设置确定
    BaseButton() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let param = {
            sysCommonConfig: {
              appName: this.form.partnerName, //平台名称
              projectNum: this.form.partnerJianjie, //租户项目上限
              appLogoUrl: this.imgesLOGO, //平台LOGO
              loginBackgroundImageUrl: this.bagkroundimges, //背景图
              appLoginAddress: this.form.appLoginAddress, //APP登录地址
              adminLoginAddress: this.form.adminLoginAddress, //后台登录地址
            },
          };
          if (this.form.id) {
            let editParam = {
              appName: this.form.partnerName, //平台名称
              projectNum: this.form.partnerJianjie, //租户项目上限
              // appLogoUrl: this.imgesLOGO, //平台LOGO
              // loginBackgroundImageUrl: this.bagkroundimges, //平台LOGO
              id: this.form.id, //判断是修改还是新增的ID
              appLoginAddress: this.form.appLoginAddress, //APP登录地址
              adminLoginAddress: this.form.adminLoginAddress, //后台登录地址
            };
            if (this.imgesLOGO != "") {
              editParam.appLogoUrl = this.imgesLOGO;
            }
            if (this.bagkroundimges != "") {
              editParam.loginBackgroundImageUrl = this.bagkroundimges;
            }
            editAPI(editParam).then((res) => {
              // //console.log(res, "修改结果");
              if (res.code == 200) {
                this.$message({
                  message: "提交成功,需重新登录生效",
                  type: "success",
                });
                this.getData();
              } else {
                this.$message.error("提交失败");
              }
            });
          } else {
            // //console.log(param, "提交按钮");
            comnonConfig(param).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "提交成功,需重新登录生效",
                  type: "success",
                });
                this.getData();
              } else {
                this.$message.error("提交失败");
              }
            });
          }
        }
      });
    },

    handleChange1(file, fileList) {
      // //console.log(this.fileList1, "777777777");
      if (this.fileList1.length >= 0) {
        this.fileList1 = [];
      }

      this.fileList1.push(file);

      // //console.log(file, "1111");

      let formData = new FormData();

      // formData.append("avatarfile", file.raw);
      formData.append("file", file.raw);

      // //console.log(this.fileList1, "333");
      // //console.log(formData, "后端222222");
      upload(formData).then((data) => {
        // //console.log(data, "00045225745");
        // this.fileList1.push({url:data.url})
        // this.imgesLOGO = data.url;
        // this.imgesLOGO = "http://mao.91weiduan.cn"+data.fileName;
        this.imgesLOGO = this.$situation.dizhi+data.fileName;

        // this.form.partnerLogo = data.imgUrl;
      });
    },
    // logo取消图片的函数
    handleRemove1(file, fileList) {
      this.imgesLOGO = "http://192.168.31.130/static/img/profile.473f5971.jpg";

      // param.sysCommonConfig.loginBackgroundImageUrl="";
    },
    handleChange(file, fileList) {
      if (this.fileList.length >= 0) {
        this.fileList = [];
      }
      this.fileList.push(file);

      // //console.log(file, "1111");

      let formData = new FormData();

      // formData.append("avatarfile", file.raw);
      formData.append("file", file.raw);

      // //console.log(this.fileList, "333");

      upload(formData).then((data) => {
        // //console.log(data, "222");
        //  this.fileList.push({url:data.url})
        // this.bagkroundimges = data.url;
        // this.bagkroundimges = 'http://mao.91weiduan.cn'+data.fileName;
        this.bagkroundimges = this.$situation.dizhi+data.fileName;
        // this.form.partnerLogo = data.imgUrl;
      });
    },
    // 取消图片的函数
    handleRemove(file, fileList) {
      this.bagkroundimges ="http://121.40.114.220/wp-content/uploads/2016/09/yiduoyun.jpg";
      // this.fileList = [];
    },
    handleClick(tab, event) {
      // //console.log(tab, event);
    },
    applicationForm() {
      let _this = this;
      let clipboardEl = new clipboard(".applicationFormNum"); // 类名
      clipboardEl.on("success", function (e) {
        _this.$message({
          message: "复制成功",
          type: "success",
        });
        clipboardEl.destroy();
      });
      clipboardEl.on("error", function (e) {
        _this.$message.error("复制失败");
        clipboardEl.destroy();
      });
    },
  },
};
</script>


<style scoped lang="scss">
.topDiv {
  padding: 20px;
  overflow: hidden;
  height: auto;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

  .title {
    height: 50px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    img {
      height: 30px;
      margin-right: 10px;
    }
  }
}

.poR {
  position: relative;
  .poA {
    position: absolute;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
  }
  .poDiv {
    border: 1px solid #40a0ff00;
    border-radius: 5px;
    padding: 15px;
    .poImg {
      width: 100%;
    }
  }
  .isActive {
    border: 1px solid #409eff;
  }
}
.textData {
  background-color: rgb(245, 245, 245);
  padding: 20px;
  .colDiv {
    background-color: rgb(252, 252, 252);
    border: 1px solid rgb(230, 230, 230);
    padding: 20px;
  }
}
</style>
